<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <style>
        .pagination>li>a.navigatepage{
            background-color: #337ab7;
            color: #fff;
        }
    </style>
</head>
<body>
    hello view index!<br>

    <!-- 搭建显示页面-->
    <div class="container">
        <!-- 标题-->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>

        <!-- 按钮-->
        <div class="row">
            <div class="col-md-2 col-md-offset-10">
                <button type="button" class="btn btn-primary">新增</button>
                <button type="button" class="btn btn-danger">删除</button>
            </div>
        </div>

        <!-- 表格数据-->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover">
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                    <tr th:each="emp : ${pageInfo.list}">
                        <td th:text="${emp.empId}"></td>
                        <td th:text="${emp.empName}"></td>
                        <td th:text="${emp.gender=='M'?'男':'女'}"></td>
                        <td th:text="${emp.email}"></td>
                        <td th:text="${emp.department.deptName}"></td>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                            </button>
                            <button type="button" class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- 分页信息-->
        <div class="row">
            <!-- 分页文字信息-->
            <div class="col-md-6">
                当前 <label class="label label-default" th:text="${pageInfo.pageNum}"></label> 页,
                总共 <label class="label label-default" th:text="${pageInfo.pages}"></label> 页,
                总共 <label class="label label-default" th:text="${pageInfo.total}"></label> 条记录
            </div>
            <!-- 分页条信息-->
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li><a href="/query?pn=1">首页</a></li>
                        <li>
                            <a th:href="@{'/query?pn='+${pageInfo.pageNum-1}}" th:if="${pageInfo.hasPreviousPage}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>

                        <li  th:each="page_Num : ${pageInfo.navigatepageNums}">
                            <a class="navigatepage" th:href="@{'/query?pn='+${page_Num}}" th:if="${page_Num == pageInfo.pageNum}" th:text="${page_Num}"></a>
                            <a class="" th:href="@{'/query?pn='+${page_Num}}" th:if="${page_Num != pageInfo.pageNum}" th:text="${page_Num}"></a>
                        </li>

                        <li>
                            <a th:href="@{'/query?pn='+${pageInfo.pageNum+1}}" th:if="${pageInfo.hasNextPage}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li><a th:href="@{'/query?pn='+${pageInfo.pages}}">末页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>


    <input type="hidden" id="pageInfo" th:value="${pageInfo}" />

    <script type="text/javascript">
        $(document).ready(function () {
            // var pageInfo = $("#pageInfo").val();
            console.log(pageInfo);

            // $(".page").click(function () {
            //    var page = $(this).html();
            //    console.log(page);
            //    $(this).attr("href","/query?pn="+page);
            // });
        });
    </script>
</body>
</html>